<template>
  <view class="activity-detail">
    <!-- 封面图 -->
    <view class="cover-image">
      <image :src="activityDetail?.coverImage" mode="aspectFill"></image>
      <view class="activity-status" :class="getStatusClass()">
        {{ getStatusText() }}
      </view>
    </view>

    <!-- 活动信息主体内容区 -->
    <view class="content-container">
      <!-- 活动标题卡片 -->
      <view class="title-card">
        <view class="title">{{ activityDetail?.title || '加载中...' }}</view>
      </view>

      <!-- 活动基本信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">活动信息</text>
        </view>

        <view class="info-item">
          <text class="iconfont icon-time"></text>
          <view class="info-content">
            <view class="info-label">活动时间</view>
            <view class="info-value"
              >{{ formatDate(activityDetail?.startTime) }} -
              {{ formatDate(activityDetail?.endTime) }}</view
            >
          </view>
        </view>

        <view class="info-item">
          <text class="iconfont icon-location"></text>
          <view class="info-content">
            <view class="info-label">活动地点</view>
            <view class="info-value">{{ activityDetail?.location || '暂无' }}</view>
          </view>
        </view>

        <view class="info-item">
          <text class="iconfont icon-user"></text>
          <view class="info-content">
            <view class="info-label">参与人数</view>
            <view class="info-value"
              >{{ activityDetail?.currentParticipants || 0 }}/{{
                activityDetail?.maxParticipants || '不限'
              }}</view
            >
          </view>
        </view>
      </view>

      <!-- 活动详情卡片 -->
      <view class="description-card">
        <view class="card-header">
          <text class="card-title">活动详情</text>
        </view>
        <view class="desc-content">{{ activityDetail?.description || '暂无详情' }}</view>
      </view>
    </view>

    <!-- 报名按钮 -->
    <view class="signup-button-container safe-area-bottom">
      <button class="signup-button" @click="onSignup()" :disabled="handleDisableSignupButton()">
        {{ getTSignupButtonText() }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getActivityByIdAPI,
  postEnrollByActivityIdAPI,
  putCancelEnrollByActivityIdAPI,
} from '@/services/activity'
import type { ActivityVo } from '@/types/activity'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 活动详情数据
const activityDetail = ref<ActivityVo>({} as ActivityVo)
// 页面ID参数
const query = defineProps<{
  id: string
}>()

// 格式化日期
const formatDate = (date?: Date) => {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
    d.getDate(),
  ).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(
    2,
    '0',
  )}`
}

// 获取活动状态样式
const getStatusClass = () => {
  if (activityDetail.value.status == 1) return 'status-upcoming'
  if (activityDetail.value.status == 2) return 'status-ongoing'
  if (activityDetail.value.status == 3) return 'status-ended'
  if (activityDetail.value.status == 4) return 'status-ended'
  return 'status-ended'
}

// 获取活动状态文本
const getStatusText = () => {
  if (activityDetail.value.status == 1) return '报名中'
  if (activityDetail.value.status == 2) return '进行中'
  if (activityDetail.value.status == 3) return '已结束'
  if (activityDetail.value.status == 4) return '已取消'
  return '已取消'
}

// 获取报名按钮文本
const getTSignupButtonText = () => {
  if (activityDetail.value.status == 4) return '已取消'
  if (activityDetail.value.status == 3) return '已结束'
  if (activityDetail.value.status == 2) return '进行中'
  if (activityDetail.value.isEnroll == 1) return '取消报名'
  if (activityDetail.value.isEnroll == 0) return '报名'
  return '已取消'
}

//报名按钮是否能被点击
const handleDisableSignupButton = () => {
  if (activityDetail.value.status == 4) return true
  if (activityDetail.value.status == 3) return true
  if (activityDetail.value.status == 2) return true
  return false
}

// 获取活动详情
const getActivityDetail = async () => {
  try {
    const res = await getActivityByIdAPI(query.id)
    activityDetail.value = res.data
  } catch (error) {
    uni.showToast({
      title: '获取活动详情失败',
      icon: 'none',
    })
  }
}

// 报名处理
const onSignup = async () => {
  const isEnroll = activityDetail.value?.isEnroll == 1
  // 这里添加报名逻辑
  //报名确认框
  uni.showModal({
    title: isEnroll ? '取消报名' : '确认报名',
    content: isEnroll ? '确定要取消报名该活动吗？' : '确定要报名该活动吗？',
    success: async (res) => {
      if (res.confirm) {
        if (isEnroll) {
          const result = await putCancelEnrollByActivityIdAPI(query.id)
          if (result.code == 200) {
            uni.showToast({
              title: '取消报名成功',
              icon: 'success',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({
              title: result.msg,
              icon: 'error',
            })
          }
        } else {
          const result = await postEnrollByActivityIdAPI(query.id)
          if (result.code == 200) {
            uni.showToast({
              title: '报名成功',
              icon: 'success',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          } else {
            uni.showToast({
              title: result.msg,
              icon: 'error',
            })
          }
        }
      }
    },
  })
}

// 页面加载
onLoad(() => {
  if (query.id) {
    getActivityDetail()
  }
})
</script>

<style lang="scss">
.activity-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.cover-image {
  width: 100%;
  height: 420rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }

  .activity-status {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

    &.status-upcoming {
      background-color: #1296db;
    }

    &.status-ongoing {
      background-color: #07c160;
    }

    &.status-ended {
      background-color: #999;
    }
  }
}

.content-container {
  margin-top: 20rpx;
  padding: 0 30rpx 30rpx;
}

.title-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
  }
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8rpx;
      width: 8rpx;
      height: 32rpx;
      background-color: #1296db;
      border-radius: 4rpx;
    }
  }
}

.info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .iconfont {
      margin-right: 20rpx;
      font-size: 40rpx;
      color: #1296db;
      margin-top: 6rpx;
      flex-shrink: 0;
    }

    .info-content {
      flex: 1;

      .info-label {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 4rpx;
      }

      .info-value {
        font-size: 30rpx;
        color: #333;
        line-height: 1.4;
        word-break: break-all;
      }
    }
  }
}

.description-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .desc-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
    text-align: justify;
  }
}

.signup-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
  box-sizing: border-box;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .signup-button {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(to right, #1296db, #24c0eb);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
